<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Carousel Template for Bootstrap</title>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>
    <%- include header %>

        <!--bannar-->

        <div class="container-fluid">
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <% movie.movie_coming_soon[1].forEach(function(item,index){%>
                        <li data-target="#carousel-example-generic" data-slide-to="<%= index %>" class="<% if(index===0){%>active<%}%>" style="background:#000"></li>
                        <%})%>
                            <!--<li data-target="#carousel-example-generic" data-slide-to="2"></li>-->
                </ol>

                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                    <% movie.movie_coming_soon[1].forEach(function(item,index){%>
                        <div class="item <% if(index===0){%>active<%}%>">
                            <img src="<%= item.images.large %>" alt="<%= item.title%>" />
                            <div class="carousel-caption">
                            </div>
                        </div>
                        <%})%>
                </div>

                <!-- Controls -->
                <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
                <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
            </div>
        </div>
        <script>
            $('.carousel').carousel();
        </script>

        <!--分栏-->
        <!--coming soon-->
        <div class="container-fluid">
            <div class="page-header">
                <h3>Comging Soon<small>即将上映的电影</small></h3>
            </div>

            <div class="container-fluid">
                <div class="row show-grid">
                    <% movie.movie_coming_soon[1].forEach(function(item,index){%>
                        <div class="col-lg-2">
                            <img src="<%= item.images.large%>" class="col-lg-12 img-rounded" alt="<%= item.title%>" width="220" height="280" />
                            <div class="container-fluid">
                                <div class="page-header">
                                    <h4>
                                        <a href="./comment?movie_id=<%= item.id %>">
                                              <%= item.title%>
                                            </a>
                                    </h4>
                                </div>
                                <p>主演：
                                    <% item.casts.forEach(function(item,index){%>
                                        <%=item.name%>,
                                            <%})%>
                                </p>
                            </div>
                        </div>
                        <%})%>
                </div>
            </div>

            <div class="col-lg-6 col-lg-offset-5">
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <li>
                            <a href="./?pageNum_cs=1" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                        </li>
                        <% for(var i=1;i<=movie.movie_coming_soon.data.totalpages;i++){ %>                        
                          <li><a href="./?pageNum_cs=<%=i %>"><%= i %></a></li>
                        <% }%>

                        <li>
                            <a href="./?pageNum_cs=<%= movie.movie_coming_soon.data.totalpages %>" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                        </li>
                    </ul>
                </nav>
            </div>

        </div>
        <!--top-->
        <div class="container-fluid">
            <div class="page-header">
                <h3>Top <small>评分最高的电影</small></h3>
            </div>

            <div class="container-fluid">
                <div class="row show-grid">
                    <div class="row show-grid">
                        <% movie.movie_top250[1].forEach(function(item,index){%>
                            <div class="col-lg-2">
                                <img src="<%= item.images.large%>" class="col-lg-12 img-rounded" alt="<%= item.title%>" width="220" height="280" />
                                <div class="container-fluid">
                                    <div class="page-header">
                                        <h4>
                                            <a href="./comment?movie_id=<%= item.id %>">
                                              <%= item.title%>
                                            </a>
                                        </h4>
                                    </div>
                                    <p>主演：
                                        <% item.casts.forEach(function(item,index){%>
                                            <%=item.name%>,
                                                <%})%>
                                    </p>
                                </div>
                            </div>
                            <%})%>
                    </div>
                </div>
            </div>

            <div class="col-lg-6 col-lg-offset-5">
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                       <li>
                            <a href="./?pageNum_top=1" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                        </li>
                        <% for(var i=1;i<=movie.movie_top250.data.totalpages;i++){ %>                        
                          <li><a href="./?pageNum_top=<%=i %>"><%= i %></a></li>
                        <% }%>

                        <li>
                            <a href="./?pageNum_top=<%= movie.movie_coming_soon.data.totalpages %>" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                        </li>
                    </ul>
                </nav>
            </div>

        </div>
        <!--Hot-->
        <div class="container-fluid">
            <div class="page-header">
                <h3>Hot <small>看看最近有什么热播电影吧</small></h3>
            </div>

            <div class="container-fluid">
                <div class="row show-grid">
                    <div class="row show-grid">
                        <% movie.movie_in_theater[1].forEach(function(item,index){%>
                            <div class="col-lg-2">
                                <img src="<%= item.images.large%>" class="col-lg-12 img-rounded" alt="<%= item.title%>" width="220" height="280" />
                                <div class="container-fluid">
                                    <div class="page-header">
                                        <h4>
                                            <a href="./comment?movie_id=<%= item.id %>">
                                              <%= item.title%>
                                            </a>
                                        </h4>
                                    </div>
                                    <p>主演：
                                        <% item.casts.forEach(function(item,index){%>
                                            <%=item.name%>,
                                                <%})%>
                                    </p>
                                </div>
                            </div>
                            <%})%>
                    </div>
                </div>
            </div>

            <div class="col-lg-6 col-lg-offset-5">
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <li>
                            <a href="./?pageNum_in=1" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                        </li>
                        <% for(var i=1;i<=movie.movie_in_theater.data.totalpages;i++){ %>                        
                          <li><a href="./?pageNum_in=<%=i %>"><%= i %></a></li>
                        <% }%>

                        <li>
                            <a href="./?pageNum_in=<%= movie.movie_coming_soon.data.totalpages %>" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                        </li>
                    </ul>
                </nav>
            </div>

        </div>
        <%- include foot %>
</body>
</html>